﻿@{
    ViewBag.Title = "TreeViewDemo";    
}

<h2>TreeViewDemo</h2>

<div id="treeView">
    <ul class="subEntries"></ul>
</div>

@section scripts {

    @CoffeeScripts.Render("~/CoffeeScripts/shared/coffee")
    @CoffeeScripts.Render("~/CoffeeScripts/models/coffee")
    @CoffeeScripts.Render("~/CoffeeScripts/controllers/base/coffee")
    @CoffeeScripts.Render("~/CoffeeScripts/controllers/coffee")
    @Scripts.Render("~/Scripts/coffee-script.js", "~/bundles/waypoint")
    <style>
        div.entryItem
        {
            height: 40px;
        }

            div.entryItem span.label
            {
                font-weight: normal;
            }

        div.entryItem
        {
            padding: 5px;
        }

            div.entryItem img
            {
                height: 40px;
                width: 40px;
                vertical-align: text-top;
            }

        ul.subEntryList
        {
            padding: 0px 0px 0px 10px;
        }
    </style>

    <script type="text/x-jquery-tmpl" id="entryTemplate">
        <div class="entryItem" title="${metadata.text}">
            <img class="ul-li-icon" src="${links.typeInfo.url}?rel=largeIcon" />
            <span class="label">
                <a href="#" rel="external" class="changePath">${label}</a>
            </span>
        </div>
    </script>

    <script type="text/x-jquery-tmpl" id="treeHeaderTemplate">
        <img class="ul-li-icon" src="${links.typeInfo.url}?rel=smallIcon" />
        <span class="label">
            <a href="#" rel="external" class="changePath">${label}</a>
        </span>
    </script>

    <script type="text/x-jquery-tmpl" id="treeItemTemplate">
        <span class="toggleExpand ui-icon" style="display: inline-block"></span>
        <span class="header"></span>
        <ul class="subEntries"></ul>
    </script>



    <script type="text/coffeescript">

$(document).ready(() ->
  rootEntry = Cofe.Entry.fromUrl("http://localhost:49998/api/parse?path={cofe}")
  #rootItem = new Cofe.EntryItem({ entry : rootEntry })
  treeView = new Cofe.EntryTreeView({ el : $("#treeView") })        
  treeView.addRootEntry(rootEntry)
  #treeView.render()

)
    </script>

    <script type="text/coffeescript">

    </script>
}
